<template>
  <div class="box">
    <el-row :gutter="20" class="clearfix flex">
      <el-col :span="14">
        <div>当前配置对象：辽宁盘锦公司</div>
      </el-col>
      <el-col :span="14" :offset="14">
        <div>
          <el-button type="primary">修改配置</el-button>
          <el-button type="primary">查看修改日志</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="clearfix">
      <el-col v-for="(item, index) in list" :key="index" :span="6" :offset="3" style="height: 200px">
        <div class="row">
          <span>{{ item.title }}</span>
          <div style="align-self: center">
            <span>{{ item.label }}:</span>
            <span v-for="(i, n) in item.span" :key="n">{{ i }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: '账单类型',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '结算对象取值',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '目的地',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '承包区结算重量',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '业务员结算重量',
          label: '账单类型',
          stab: '体积重参数',
          num: 100,
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '承包区结算重量',
          label: '账单类型',
          stab: '体积重参数',
          num: 100,
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '体积重参数',
          stab: '体积重参数',
          num: 100,
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '日周期',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '业务时间定义',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        },
        {
          title: '报价生效时间',
          label: '账单类型',
          span: ['业务员,', '客户,', '承包区']
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 20px;
}
.row {
  height: 100px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

.clearfix {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
